<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车动画-抛物线</title>
	</head>
	<body>
		<div class="out_box">
			<span id="icon" style="--left: 300px;--top:300px;">
				<img class="plus" src="./img/add-icon.svg" alt="" />
			</span>
			<span id="target">目标</span>
		</div>
	</body>
</html>

<style type="text/css">
	body {
		margin: 0;
		/* background-color: #000; */
	}
	img{
		vertical-align: middle;
	}

	.out_box {
		width: 400px;
		height: 600px;
		margin: 0 auto;
		border: 1px solid #000;
		position: relative;

		#icon {
			position: absolute;
			left: var(--left);
			top: var(--top);

			.plus {
				--size: 20px;
				width: var(--size);
				height: var(--size);
			}
			@keyframes moveX{
				
			}
		}

		#target {
			position: absolute;
			bottom: 0;
		}
	}
</style>

<script type="text/javascript">
	const img = document.querySelector('.plus')
	const targetIcon = document.querySelector("#target")
	console.groupCollapsed("dom元素");
	console.group(img, targetIcon);

	console.log(img.offsetWidth, img.offsetTop);
	const startInfo = {
		x: img.offsetLeft,
		y: 0
	}
	const endInfo = {
		x: targetIcon.offsetTop,
		y: 0
	}
	console.log(startInfo, endInfo);

	img.addEventListener('click', function() {
		console.log(this, "被点击了")
		// 
	})
</script>